<template>
  <div class="mobile-asset-detail common-mobile-view">
    <el-form ref="formRef" :model="assetStore.currentAssetRecord"
             :rules="rules" label-width="auto">
      <el-form-item label="类别" prop="category">
        <el-radio-group v-model="assetStore.currentAssetRecord.category"
                        @change="changeCategoryEvent">
          <el-radio v-for="(item, index) in assetCategoryList"
                    :value="item" :key="index" :label="item">
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="名称" prop="name">
        <el-select v-model="assetStore.currentAssetRecord.name"
                   allow-create filterable
                   placeholder="请输入或选择名称" clearable>
          <el-option
              v-for="(item, index) in assetInfo.assetNameList"
              :key="index" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="所属人" prop="owner">
        <el-radio-group v-model="assetStore.currentAssetRecord.owner">
          <el-radio v-for="(item, index) in assetOwnerList"
                    :value="item" :key="index" :label="item">
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="金额" prop="amount">
        <amount-input v-model="assetStore.currentAssetRecord.amount"/>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="assetStore.currentAssetRecord.remark" autocomplete="off"
                  placeholder="请输入备注" clearable
                  show-word-limit maxlength="10">
        </el-input>
      </el-form-item>
    </el-form>

    <div class="button-container">
      <el-button type="primary" @click="confirmClick">确认</el-button>
      <el-button v-if="assetStore.assetApiType === 'UPDATE'"
                 type="danger" @click="deleteClick">删除</el-button>
      <el-button type="info" @click="cancelClick">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { AmountInput } from 'vue3-common'
import { useAssetStore } from '@/store/asset.ts'
import { useAppStore } from '@/store/app.ts'
import { FormRules } from 'element-plus'
import { assetRules } from '@/utils/element/elRules.ts'
import { onMounted, reactive, ref } from 'vue'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'

const formRef = ref()
const rules = reactive<FormRules>(assetRules)
const assetStore = useAssetStore()
const appStore = useAppStore()

onMounted(async () => {
  appStore.isShowMobileBack = true
  const { category } = assetStore.currentAssetRecord
  assetInfo.assetNameList = assetNameMap.get(category) || []
})

const assetInfo = reactive({
  assetNameList: [] as string[]
})

const assetOwnerList = ['哥哥', '宝宝']
const assetCategoryList = ['资金账户', '充值账户', '社保账户']
const assetNameMap: Map<string, string[]> = new Map([
  ['资金账户', ['支付宝', '微信']],
  ['社保账户', ['公积金', '医保']],
  ['充值账户', ['公交卡']]
])

const changeCategoryEvent = (value: string) => {
  assetInfo.assetNameList = assetNameMap.get(value) || []
}

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(async () => {
    await assetStore.handleAssetApi(assetStore.currentAssetRecord)
    history.back()
  })
}

const cancelClick = () => {
  history.back()
}

const deleteClick = () => {
  commonElMessageBox('是否确认删除该资产内容?').then(async () => {
    assetStore.assetApiType = 'DELETE'
    await assetStore.handleAssetApi(assetStore.currentAssetRecord)
    history.back()
  })
}
</script>

<style scoped lang="scss">
.mobile-asset-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .button-container {
    align-self: center;
  }
}
</style>
